import React, { useState, useRef, useEffect } from 'react';
import OpenAI from 'openai';
import SortingControlPanel from '../../components/SortingControlPanel';
import './InsertionSortPlayground.css';

// 配置OpenAI客户端
const openai = new OpenAI({
  apiKey: 'sk-e50e6d73580e411ca5bbebdda74eedcf',
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
  dangerouslyAllowBrowser: true
});

const InsertionSortPlayground = () => {
  // 完全按照原生版本的状态结构
  const [data, setData] = useState([]);
  const [animationSpeed, setAnimationSpeed] = useState(500);
  const [isRunning, setIsRunning] = useState(false);
  const [isPaused, setIsPaused] = useState(false);
  const [isStepping, setIsStepping] = useState(false);
  const [currentStep, setCurrentStep] = useState(0);
  const [totalSteps, setTotalSteps] = useState(0);
  const [status, setStatus] = useState('就绪');
  const [dataMode, setDataMode] = useState('random');

  const [customData, setCustomData] = useState('');
  const [dataError, setDataError] = useState('');
  const [dataSize, setDataSize] = useState(10);

  // 新增：左侧面板状态
  const [activeTab, setActiveTab] = useState('settings'); // 'settings' 或 'chat'
  const [chatMessages, setChatMessages] = useState([]);
  const [chatInput, setChatInput] = useState('');
  const [isAIResponding, setIsAIResponding] = useState(false);

  // AI对话历史（用于维护上下文）
  const [aiChatHistory, setAiChatHistory] = useState([]);

  // 建议问题状态
  const [suggestedQuestions, setSuggestedQuestions] = useState([
    '生成一组极端插入排序测试用例',
    '用Java语言实现插入排序',
    '插入排序的优化方法有哪些'
  ]);

  // 新增：面板拖拽状态
  const [leftPanelWidth, setLeftPanelWidth] = useState(400);
  const [isDragging, setIsDragging] = useState(false);
  const containerRef = useRef(null);

  // 真实AI调用函数
  const getAIResponse = async (userMessages) => {
    try {
      // 构建完整的消息数组，包含系统提示词
      const systemPrompt = {
        role: "system",
        content: `# 角色
你是一位专业的AI辅助，擅长处理基础算法和数据结构问题，并能够根据用户的需求生成相应的测试数据或解答疑惑。

## 结构化回复模板
{
    "status": <0或1>,
    "data": <指定数据，通常用数组格式，可为null>,
    "message": <回复的内容，字符串>,
    "associate1" : <通过对方的提问以及回答，联想的问题1>,
    "associate2" : <通过对方的提问以及回答，联想的问题2>,
    "associate3" : <通过对方的提问以及回答，联想的问题3>
}

## 技能

### 技能1：答案识别与回应
- **任务**：根据用户发来的信息，通过合理判断，返回一个JSON格式的数据。且对应JSON字段里的\`status\`值，只有两种可能性。
  - 如果用户发来的信息包含但不限于"生成"、"测试数据"等关键字，\`status\`为1，同时\`data\`字段为生成的数据，且\`message\`字段为几乎固定的回复。生成的每个联想问题最好不超过15字。例如：
    {
        "status": 1,
        "data": [5, 4, 3, 2, 1],
        "message": "已生成符合你要求的数据！",
        "associate1" :  "有没有最好情况的数据",
        "associate2" :  "你给出的数据的时间复杂度是多少",
        "associate3" :  "有没有办法进一步优化算法"
    }
  - 如果通过你的判断，用户的提问是为了解答疑惑，而非生成测试样例，那么\`status\`为0，\`data\`为null，且正常生成回复。例如：
    {
        "status": 0,
        "data": null,
        "message": "插入排序通过将每个元素插入到已排序部分的正确位置来实现排序",
        "associate1" : "插入排序的时间复杂度是多少",
        "associate2" : "插入排序适用于什么场景",
        "associate3" : "插入排序和选择排序的区别"
    }

## 限制

- 每次回复的内容必须是一个结构化数据（JSON格式），不能有其他任何多余的文字。
- 包括接下来括号里的东西，也不要在回复中出现！！这非常重要，否则会影响网页的渲染。右边括号内的内容不允许出现('''json)
- 如果message字段中包含代码，必须使用标准的Markdown代码块格式：三个反引号+语言名+换行+代码内容+换行+三个反引号
- 代码块必须指定正确的语言标识符，如：java、python、c、javascript等

`
      };

      const messages = [systemPrompt, ...userMessages];

      const completion = await openai.chat.completions.create({
        model: "qwen-plus",
        messages: messages,
      });
      return completion.choices[0].message.content;
    } catch (error) {
      console.error("Error fetching AI response:", error);
      throw error;
    }
  };

  // 引用
  const dataRef = useRef([]);
  const barsRef = useRef([]);
  const dataDisplayRef = useRef(null);
  const timeoutsRef = useRef([]);

  // 添加运行状态的ref，避免React状态更新延迟问题
  const runningStateRef = useRef({
    isRunning: false,
    isPaused: false,
    isStepping: false
  });

  // 排序状态
  const sortingState = useRef({
    i: 1,  // 当前要插入的元素索引
    j: 0,  // 在已排序区域中的比较位置
    key: 0, // 当前要插入的元素值
    phase: 'select' // 'select', 'compare', 'move', 'insert'
  });





  // 处理拖拽
  const handleMouseDown = (e) => {
    setIsDragging(true);
    e.preventDefault();
  };

  const handleMouseMove = (e) => {
    if (!isDragging || !containerRef.current) return;
    
    const containerRect = containerRef.current.getBoundingClientRect();
    const newWidth = e.clientX - containerRect.left;
    
    if (newWidth >= 300 && newWidth <= 1000) {
      setLeftPanelWidth(newWidth);
    }
  };

  const handleMouseUp = () => {
    setIsDragging(false);
  };

  useEffect(() => {
    if (isDragging) {
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
      document.body.style.cursor = 'col-resize';
      document.body.style.userSelect = 'none';
    }

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
      document.body.style.cursor = '';
      document.body.style.userSelect = '';
    };
  }, [isDragging]);

  // 清除所有定时器
  const clearAllTimeouts = () => {
    timeoutsRef.current.forEach(timeout => clearTimeout(timeout));
    timeoutsRef.current = [];
  };

  // 重置排序状态
  const resetSortingState = () => {
    setCurrentStep(0);
    setTotalSteps(0);
    clearAllTimeouts();

    // 清除所有DOM样式
    if (barsRef.current) {
      barsRef.current.forEach(bar => {
        if (bar) {
          bar.classList.remove('current', 'comparing', 'swapping', 'sorted-region', 'sorted');
        }
      });
    }

    // 重置排序状态
    sortingState.current = {
      i: 1,
      j: 0,
      key: 0,
      phase: 'select'
    };
  };

  // 停止排序
  const stopSorting = () => {
    // 清除所有定时器
    clearAllTimeouts();

    runningStateRef.current.isRunning = false;
    runningStateRef.current.isPaused = false;
    runningStateRef.current.isStepping = false;

    setIsRunning(false);
    setIsPaused(false);
    setIsStepping(false);
    resetSortingState();
    renderData(dataRef.current);
    setStatus('已停止');
  };

  // 暂停排序
  const pauseSorting = () => {
    runningStateRef.current.isPaused = true;
    setIsPaused(true);
    setStatus('已暂停');
  };



  // 睡眠函数
  const sleep = (ms) => {
    return new Promise(resolve => {
      const timeout = setTimeout(resolve, ms);
      timeoutsRef.current.push(timeout);
    });
  };



  // 渲染数据到DOM
  const renderData = (dataArray) => {
    if (!dataDisplayRef.current) return;

    const container = dataDisplayRef.current;
    container.innerHTML = '';
    barsRef.current = [];

    if (dataArray.length === 0) {
      // 显示空状态
      const emptyState = document.createElement('div');
      emptyState.className = 'empty-state';
      emptyState.innerHTML = '<p>点击"生成数据"开始</p>';
      container.appendChild(emptyState);
      return;
    }

    const maxValue = Math.max(...dataArray);

    dataArray.forEach((value, index) => {
      const bar = document.createElement('div');
      bar.className = 'insertion-data-bar';
      bar.style.height = `${(value / maxValue) * 250}px`;

      const valueSpan = document.createElement('span');
      valueSpan.className = 'value';
      valueSpan.textContent = value;
      bar.appendChild(valueSpan);

      container.appendChild(bar);
      barsRef.current[index] = bar;
    });
  };

  // 交换相邻的柱状图
  const swapBars = async (index1, index2) => {
    const bar1 = barsRef.current[index1];
    const bar2 = barsRef.current[index2];

    if (!bar1 || !bar2) return;

    // 获取当前位置
    const rect1 = bar1.getBoundingClientRect();
    const rect2 = bar2.getBoundingClientRect();
    const distance = rect2.left - rect1.left;

    // 设置过渡效果
    bar1.style.transition = `transform ${animationSpeed / 3}ms ease`;
    bar2.style.transition = `transform ${animationSpeed / 3}ms ease`;

    // 执行移动动画
    bar1.style.transform = `translateX(${distance}px)`;
    bar2.style.transform = `translateX(${-distance}px)`;

    // 等待动画完成
    await sleep(animationSpeed / 3);

    // 交换DOM元素位置
    const parent = bar1.parentNode;
    const nextSibling = bar1.nextSibling === bar2 ? bar1 : bar1.nextSibling;
    parent.insertBefore(bar1, bar2.nextSibling);
    parent.insertBefore(bar2, nextSibling);

    // 交换bars数组中的引用
    [barsRef.current[index1], barsRef.current[index2]] = [barsRef.current[index2], barsRef.current[index1]];

    // 重置transform和transition
    bar1.style.transform = '';
    bar2.style.transform = '';
    bar1.style.transition = '';
    bar2.style.transition = '';
  };

  // 验证自定义数据
  const validateCustomData = (input = customData) => {
    if (!input.trim()) return true;

    // 检查格式：只允许数字和逗号
    const regex = /^[0-9,\s]+$/;
    if (!regex.test(input)) {
      setDataError('输入格式有误：只能包含数字和逗号');
      return false;
    }

    // 检查是否有有效数字
    const numbers = input.split(',').map(s => s.trim()).filter(s => s !== '');
    if (numbers.length === 0) {
      setDataError('请输入至少一个数字');
      return false;
    }

    // 检查每个数字是否有效
    for (let num of numbers) {
      if (isNaN(parseInt(num)) || parseInt(num) < 1 || parseInt(num) > 100) {
        setDataError('数字必须在1-100之间');
        return false;
      }
    }

    if (numbers.length > 30) {
      setDataError('数据数量不能超过30个');
      return false;
    }

    setDataError('');
    return true;
  };

  // 生成随机数据
  const generateRandomData = () => {
    const size = parseInt(dataSize);
    if (size > 30) {
      alert('数据数量不能超过30个');
      return;
    }
    if (size < 3) {
      alert('数据数量不能少于3个');
      return;
    }
    const newData = [];
    for (let i = 0; i < size; i++) {
      newData.push(Math.floor(Math.random() * 100) + 1);
    }
    setData(newData);
    dataRef.current = [...newData];
    renderData(newData);
    resetSortingState();
    setStatus('就绪');
  };

  // 生成自定义数据
  const generateCustomData = () => {
    if (!validateCustomData()) {
      return;
    }

    const input = customData.trim();
    if (!input) {
      setDataError('请输入数据');
      return;
    }

    const newData = input.split(',')
      .map(s => s.trim())
      .filter(s => s !== '')
      .map(s => parseInt(s));

    setData(newData);
    dataRef.current = [...newData];
    renderData(newData);
    resetSortingState();
    setStatus('就绪');
  };

  // 处理生成数据
  const handleGenerateData = () => {
    if (isRunning && !isPaused) {
      return;
    }

    stopSorting();

    if (dataMode === 'custom' && customData.trim()) {
      generateCustomData();
    } else {
      generateRandomData();
      if (dataMode === 'custom') {
        setCustomData('');
        setDataError('');
      }
    }
  };

  // 处理自定义数据输入
  const handleCustomDataChange = (e) => {
    const value = e.target.value;
    setCustomData(value);
    setDataError('');

    if (value.trim()) {
      try {
        validateCustomData(value);
      } catch (error) {
        setDataError('数据格式错误，请输入用逗号分隔的数字');
      }
    }
  };

  // 执行排序步骤
  const runSortingStep = async () => {
    // 检查是否应该停止
    if (!runningStateRef.current.isRunning || (runningStateRef.current.isPaused && !runningStateRef.current.isStepping)) {
      return;
    }

    const { i, phase } = sortingState.current;
    const n = dataRef.current.length;

    // 检查是否完成排序
    if (i >= n) {
      completeSorting();
      return;
    }

    if (phase === 'select') {
      // 选择阶段：选择当前要插入的元素
      const key = dataRef.current[i];
      sortingState.current.key = key;
      sortingState.current.j = i - 1;
      sortingState.current.phase = 'compare';

      // 高亮当前要插入的元素
      if (barsRef.current[i]) {
        barsRef.current[i].classList.add('current');
      }

      setStatus(`选择元素 ${key} 准备插入到已排序区域`);

    } else if (phase === 'compare') {
      // 比较阶段：与已排序区域的元素比较
      const key = sortingState.current.key;
      const j = sortingState.current.j;
      const currentI = sortingState.current.i;

      if (j >= 0 && dataRef.current[j] > key) {
        // 需要交换
        // 高亮比较的元素
        if (barsRef.current[j]) {
          barsRef.current[j].classList.add('comparing');
        }
        if (barsRef.current[j + 1]) {
          barsRef.current[j + 1].classList.add('swapping');
        }

        setStatus(`比较 ${dataRef.current[j]} 和 ${key}，需要交换位置`);

        // 等待一下让用户看到比较状态
        await sleep(animationSpeed / 2);

        // 执行交换动画
        await swapBars(j, j + 1);

        // 交换数据
        [dataRef.current[j], dataRef.current[j + 1]] = [dataRef.current[j + 1], dataRef.current[j]];
        setData([...dataRef.current]);

        // 清除样式
        if (barsRef.current[j]) {
          barsRef.current[j].classList.remove('comparing');
        }
        if (barsRef.current[j + 1]) {
          barsRef.current[j + 1].classList.remove('swapping');
        }

        sortingState.current.j--;
        // 继续比较

      } else {
        // 找到插入位置
        if (j >= 0) {
          if (barsRef.current[j]) {
            barsRef.current[j].classList.add('comparing');
          }
          setStatus(`比较 ${dataRef.current[j]} 和 ${key}，找到插入位置`);
          await sleep(animationSpeed / 2);
          if (barsRef.current[j]) {
            barsRef.current[j].classList.remove('comparing');
          }
        }

        // 清除当前元素的高亮
        if (barsRef.current[currentI]) {
          barsRef.current[currentI].classList.remove('current');
        }

        // 标记为已排序区域
        for (let k = 0; k <= currentI; k++) {
          if (barsRef.current[k]) {
            barsRef.current[k].classList.add('sorted-region');
          }
        }

        setStatus(`元素 ${key} 已插入到正确位置`);

        // 准备下一轮
        sortingState.current.i++;
        sortingState.current.phase = 'select';
      }
    }

    setCurrentStep(prev => prev + 1);

    // 处理单步执行和连续执行
    if (runningStateRef.current.isStepping) {
      // 单步执行模式：暂停等待下一次点击
      runningStateRef.current.isPaused = true;
      setIsPaused(true);
      setStatus(prev => prev + ' - 等待下一步');
    } else if (!runningStateRef.current.isPaused && runningStateRef.current.isRunning) {
      // 连续执行模式：继续下一步
      const timeoutId = setTimeout(() => {
        if (!runningStateRef.current.isPaused && runningStateRef.current.isRunning) {
          runSortingStep();
        }
      }, animationSpeed / 2);
      timeoutsRef.current.push(timeoutId);
    }
  };

  // 完成排序
  const completeSorting = () => {
    runningStateRef.current.isRunning = false;
    runningStateRef.current.isPaused = false;
    runningStateRef.current.isStepping = false;

    setIsRunning(false);
    setIsPaused(false);
    setIsStepping(false);

    // 标记所有元素为已排序
    if (barsRef.current) {
      barsRef.current.forEach(bar => {
        if (bar) {
          bar.classList.remove('current', 'comparing', 'swapping');
          bar.classList.add('sorted');
        }
      });
    }

    // 清除所有高亮状态已在上面的DOM操作中完成

    setStatus('插入排序完成！');
  };

  // 开始排序
  const startSorting = () => {
    if (dataRef.current.length < 2) {
      alert('至少需要2个数据才能进行排序');
      return;
    }

    // 清除之前的所有定时器
    clearAllTimeouts();

    // 同时更新React状态和ref状态
    runningStateRef.current.isRunning = true;
    runningStateRef.current.isPaused = false;
    runningStateRef.current.isStepping = false;

    setIsRunning(true);
    setIsPaused(false);
    setIsStepping(false);
    setStatus('排序中...');

    // 重置排序状态
    resetSortingState();

    // 立即执行，不需要setTimeout
    runSortingStep();
  };

  // 单步执行
  const stepSorting = () => {
    if (dataRef.current.length < 2) {
      alert('至少需要2个数据才能进行排序');
      return;
    }

    // 清除之前的所有定时器
    clearAllTimeouts();

    if (!runningStateRef.current.isRunning && !runningStateRef.current.isPaused) {
      runningStateRef.current.isRunning = true;
      runningStateRef.current.isPaused = false;
      runningStateRef.current.isStepping = true;

      setIsRunning(true);
      setIsPaused(false);
      setIsStepping(true);
      setStatus('单步执行中...');

      // 重置排序状态
      resetSortingState();
    } else if (runningStateRef.current.isPaused) {
      runningStateRef.current.isPaused = false;
      runningStateRef.current.isStepping = true;

      setIsPaused(false);
      setIsStepping(true);
      setStatus('单步执行中...');
    }

    // 立即执行下一步
    runSortingStep();
  };

  // AI聊天功能
  const handleSendMessage = async (message) => {
    if (!message.trim() || isAIResponding) return;

    // 添加用户消息
    const userMessage = {
      id: Date.now(),
      type: 'user',
      content: message,
      timestamp: new Date()
    };

    setChatMessages(prev => [...prev, userMessage]);
    setChatInput('');
    setIsAIResponding(true);

    try {
      // 构建对话历史
      const newChatHistory = [
        ...aiChatHistory,
        { role: "user", content: message }
      ];

      // 调用真实AI
      const aiResponseText = await getAIResponse(newChatHistory);

      // 调试：输出AI原始回复
      console.log('=== AI原始回复 ===');
      console.log('内容:', aiResponseText);

      // 解析AI回复的JSON
      let aiResponse;
      try {
        aiResponse = JSON.parse(aiResponseText);
        console.log('=== JSON解析成功 ===');
        console.log('解析后的对象:', aiResponse);
      } catch (parseError) {
        console.log('=== JSON解析失败 ===');
        console.log('解析错误:', parseError.message);
        // 如果不是JSON格式，当作普通回复处理
        aiResponse = {
          status: 0,
          data: null,
          message: aiResponseText,
          associate1: null,
          associate2: null,
          associate3: null
        };
      }

      // 处理AI回复
      const aiMessage = {
        id: Date.now() + 1,
        type: 'ai',
        content: aiResponse.message,
        timestamp: new Date()
      };

      setChatMessages(prev => [...prev, aiMessage]);

      // 更新建议问题
      if (aiResponse.associate1 || aiResponse.associate2 || aiResponse.associate3) {
        const newSuggestions = [
          aiResponse.associate1,
          aiResponse.associate2,
          aiResponse.associate3
        ].filter(q => q && q.trim()); // 过滤掉空值

        if (newSuggestions.length > 0) {
          setSuggestedQuestions(newSuggestions);
        }
      }

      // 如果status为1，说明AI生成了数据，需要应用到参数设置
      if (aiResponse.status === 1 && aiResponse.data && Array.isArray(aiResponse.data)) {
        console.log('生成的数据:', aiResponse.data);

        // 切换到参数设置标签
        setActiveTab('settings');

        // 设置为自定义数据模式
        setDataMode('custom');

        // 填入AI生成的数据
        const dataString = aiResponse.data.join(', ');
        setCustomData(dataString);

        // 清除错误信息
        setDataError('');
      }

      // 更新对话历史
      setAiChatHistory([
        ...newChatHistory,
        { role: "assistant", content: aiResponseText }
      ]);

    } catch (error) {
      console.error("获取AI回复失败:", error);
      const errorMessage = {
        id: Date.now() + 1,
        type: 'ai',
        content: "抱歉，我暂时无法回复。请稍后再试。",
        timestamp: new Date()
      };
      setChatMessages(prev => [...prev, errorMessage]);
    } finally {
      setIsAIResponding(false);
    }
  };

  // 处理建议问题点击
  const handleSuggestedQuestionClick = (question) => {
    setChatInput(question);
    handleSendMessage(question);
  };

  // 初始化
  useEffect(() => {
    generateRandomData();

    return () => {
      clearAllTimeouts();
    };
  }, []);



  return (
    <div className="insertion-sort-playground">
      <div
        ref={containerRef}
        className="insertion-sort-container"
        style={{ cursor: isDragging ? 'col-resize' : 'default' }}
      >
        {/* 左侧控制区 */}
        <SortingControlPanel
          leftPanelWidth={leftPanelWidth}
          activeTab={activeTab}
          setActiveTab={setActiveTab}
          data={data}
          dataMode={dataMode}
          setDataMode={setDataMode}
          customData={customData}
          setCustomData={setCustomData}
          dataError={dataError}
          dataSize={dataSize}
          setDataSize={setDataSize}
          handleGenerateData={handleGenerateData}
          handleCustomDataChange={handleCustomDataChange}
          animationSpeed={animationSpeed}
          setAnimationSpeed={setAnimationSpeed}
          isRunning={isRunning}
          isPaused={isPaused}
          isStepping={isStepping}
          startSorting={startSorting}
          stepSorting={stepSorting}
          pauseSorting={pauseSorting}
          stopSorting={stopSorting}
          status={status}
          currentStep={currentStep}
          totalSteps={totalSteps}
          chatMessages={chatMessages}
          chatInput={chatInput}
          setChatInput={setChatInput}
          isAIResponding={isAIResponding}
          handleSendMessage={handleSendMessage}
          suggestedQuestions={suggestedQuestions}
          handleSuggestedQuestionClick={handleSuggestedQuestionClick}
          algorithmName="插入排序"
        />

        {/* 拖拽分隔条 */}
        <div
          className="resize-handle"
          onMouseDown={handleMouseDown}
        />

        {/* 右侧动画面板 */}
        <div className="animation-panel" style={{ width: `calc(100% - ${leftPanelWidth + 10}px)` }}>
          <h2>动画展示</h2>
          <div className="animation-area">
            <div ref={dataDisplayRef} className="data-display">
              {/* 数据条形图将在这里显示 */}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default InsertionSortPlayground;
